<template>
	<div class="product">
		<!-- 搜索框 -->
		<div class="search">
			<div class="search1">
				<el-select v-model="searchValue"  filterable remote clearable  @change="change" @clear="clear" reserve-keyword placeholder="请输入姓名"
					:remote-method="remoteMethod" :loading="loading">
					<el-option v-for="item in stuData" :key="item.sId" :label="item.name" :value="item.name">
					</el-option>
				</el-select>
				<el-button  icon="el-icon-search" @click="add"></el-button>
				<el-button type="primary" @click="addStu">增加项目</el-button>
			</div>
			选择班级：<el-select class="search2" v-model="search" filterable @change="change" placeholder="请选择">

				<el-option v-for="item in stuData" :key="item.sId" :label="item.class" :value="item.class">
				</el-option>

			</el-select>
		</div>
		<!-- 导出excel -->
		<el-button class="excel" plain icon="iconfont icon-excel" @click="exportExcel">
			导出excel
		</el-button>
		<Dialog ref="stuDialog" :visible="visible" @ok="ok" @cancel="cancel"></Dialog>
		<!--表格 -->
		<template>
			<el-table v-loading="loading" :data="stuData" border style="width: 100%">
				<el-table-column label="头像" align="center">
					<template v-slot="{ row: { headimgurl } }">
						<el-avatar size="large" shape="square" :src="headimgurl ? headimgurl :
						'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'"></el-avatar>
					</template>

				</el-table-column>
				<el-table-column prop="name" label="姓名" align="center">
				</el-table-column>
				<el-table-column prop="degree" label="学历" align="center">
				</el-table-column>
				<el-table-column prop="class" label="班级" align="center">
				</el-table-column>
				<el-table-column width="300" align="center" prop="productUrl" label="项目">
				</el-table-column>
				<el-table-column align="center" prop="cTime" label="创建时间">
				</el-table-column>
				<el-table-column label="操作" align="center" width="300">
					<template v-slot="{ row }">
						<el-button type="primary" size="mini" icon="el-icon-view">查看</el-button>
						<el-button type="primary" size="mini" icon="el-icon-edit" @click="edit(row)">编辑</el-button>
						<el-button type="danger" icon="el-icon-delete" size="mini" @click="delStu(row)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination hide-on-single-page @current-change="pageChange" :pageSize="pageSize" background
				layout="prev, pager, next" :total="total">
			</el-pagination>
		</template>
	</div>

</template>
<script>
import Dialog from '@/components/Dialog/index.vue';
import *as api from "@/api/stu"
import qee from "qf-export-excel"
export default {
	data() {
		return {
			visible: false,
			stuData: [],
			loading: false,
			total: 0,
			pageSize: 0,
			search: "",
			searchValue:"",
			currentPage:1
		}

	},
	meta: {
		title: "xyxmgl",
		name: "项目管理",
		icon: "iconfont icon-shangpinguanli",
	},
	created() {
		this.getStuList()
	},
	methods: {
		//点击搜索
		add(){
			api.searchApi(this.searchValue, null,null)
			.then(res=>{
				console.log(res)
				this.stuData= res.data.data
			})
		},
		// 姓名搜索框
		remoteMethod(query){
			// console.log(query);
			this.searchValue=query
			api.searchApi(query, null,null)
			.then((res)=>{
				let norepeat = [];
				for (let i = 0; i < res.data.data.length; i++) {
						let flag = true;
						for (let k = 0; k < norepeat.length; k++) {
							if (norepeat[k].name === res.data.data[i].name) {
								flag = false;
								break;
							}
						}
						if (flag) {
							norepeat.push(res.data.data[i]);
						}
					}
					this.searchList = norepeat;
			})
		},
		change(search) {
			api.searchApi(search, null, null)
				.then(res => {
					this.total = 1
					this.stuData = res.data.data
				})
		},
		// 导出excel
		exportExcel() {
			let titleList = [{
				title: '头像地址',
				key: 'headimgurl'
			}, {
				title: '名字',
				key: 'name'
			}, {
				title: '项目',
				key: 'productUrl'
			}]
			// 定义数据
			qee(titleList, this.stuData, '2205项目')
		},
		// 删除
		delStu(row) {
			this.$confirm("该操作将永久删除数据，是否继续", "删除提示")
				.then(() => {
					api.deleteStu(row.sId)
						.then(res => {
							if (res.data.state) {
								this.$message.success('删除成功')
								this.getStuList()
							}
						})
				})
				.catch(() => {
					this.$message.info('已取消删除')
				})
		},
		// 增加
		addStu() {
			this.$refs.stuDialog.stuForm = {};
			this.$refs.stuDialog.title = "增加学员信息"
			this.visible = true;
		},
		// 编辑
		edit(row) {
			console.log(row)
			console.log(this.$refs.stuDialog)
			this.$refs.stuDialog.title = "编辑学员信息"
			this.$refs.stuDialog.stuForm = { ...row };

			this.visible = true;
		},
		// 页码改变的时候
		pageChange(pageSize) {
			this.getStuList(undefined, pageSize)
		},
		// 获取学员列表数据
		getStuList(count = 10, page = 1, classes) {
			this.loading = true;
			api.getStuListApi(count, page, classes)
				.then(res => {
					// console.log(res)
					if (res.data.state) {
						this.stuData = res.data.data;
						this.total = res.data.total;
						this.pageSize = count;
						this.loading = false
					}
				})
		},

		ok(formData) {
			let dialogTitle = this.$refs.stuDialog.title
			if (dialogTitle == "增加学员信息") {
				api.addStu(formData)
					.then(res => {
						// console.log(res)
						if (res.data.state) {

						}
					})
			} else if (dialogTitle == "编辑学员信息") {
				api.editStuApi(formData)
					.then(res => {
						if (res.data.state) {
							this.getStuList()
							this.$message.success('更新成功')
						}

					})
			}

			this.visible = false
		},
		cancel() {
			console.log('dialogClose')
			this.visible = false
		},
		clear() {
				
				this.currentPage = 1;
				
			},

	},
	mounted() {
     
    },
	components: { Dialog }
};
</script>
<style scoped>
.search {
	text-align: left;
}
.search1{
	line-height:60px;
	
}
.search2{
	line-height:60px;
}
.excel{
	float: right;
	color: green;
}
</style>